<script setup lang="ts">
import { ref } from "vue"
import { getCodeAPI, loginByCodeAPI } from "@/apis/user"
import { useUserStore } from "@/stores/user"
const store = useUserStore()

const formValue = ref({
  mobile: "13230000033",
  code: "111111",
})

// 告诉表单 如何验证数据
// 对象 => 针对你验证的字段名 添加规则
const rules = {
  // 对mobile字段进行必填验证
  mobile: {
    // mobile 的规则是个数组
    rules: [
      // 规则1
      {
        required: true, // 必填 非空
        errorMessage: "手机号不能为空",
      },
      // 规则2
      {
        // minLength: 11,
        // maxLength: 11,
        pattern: /^1[3-9]\d{9}$/, // 正则
        errorMessage: "手机号必须符合中国大陆手机号格式",
      },
    ],
  },
  // 对email字段进行必填验证
  code: {
    // 验证码 非空   6位数字
    rules: [
      // 规则1 非空
      {
        required: true,
        errorMessage: "验证码都不填",
      },
      // 规则2
      {
        pattern: /^\d{6}$/,
        errorMessage: "验证码6位数字",
      },
    ],
  },
}

const submit = async () => {
  // 验证函数validate是一个Promise哦！！
  // formRef.value.validate()

  // 原始写法 成功就挺狠 失败就catch
  // formRef.value
  //   .validate()
  //   .then(() => {})
  //   .catch(() => {})

  try {
    await formRef.value.validate()
    // console.log("发请求")
    if (!isAgree) {
      // console.log('请先同意隐私协议');
      uni.showToast({
        title: "你先同意下用户协议哈",
        icon: "none",
      })
      return
    }
    const res = await loginByCodeAPI(formValue.value)
    // 所有数据存入pinia持久化
    store.setUser(res)

    uni.showToast({
      title: "登录成功",
      icon: "none",
    })

    // 路由跳转
    // 1 跳转到普通页面
    // uni.navigateTo({ url: '/pages/' })
    // 2 跳到Tabs页面
    uni.switchTab({ url: "/pages/index/index" })
  } catch (err) {
    console.log("校验失败", err)
  }
}

const formRef = ref()

// 响应式数据用于展示倒计时组件的 显示和消失
const countdown = ref(false)

// 获取验证码
const getCode = async () => {
  // 1 单独校验手机号规则
  await formRef.value.validateField(["mobile"])

  // 2 获取验证码
  const res = await getCodeAPI(formValue.value.mobile, "login")
  console.log(res.code)
  formValue.value.code = res.code

  // 3 展示倒计时
  countdown.value = true
}

const isAgree = ref(false)
</script>

<template>
  <uni-forms ref="formRef" :rules="rules" :model="formValue" class="login-form">
    <uni-forms-item name="mobile">
      <uni-easyinput
        :input-border="false"
        :clearable="false"
        placeholder="请输入手机号"
        v-model="formValue.mobile"
        placeholder-style="color: #C3C3C5"
      />
    </uni-forms-item>
    <uni-forms-item name="code">
      <uni-easyinput
        :input-border="false"
        :clearable="false"
        placeholder="请输入验证码"
        v-model="formValue.code"
        placeholder-style="color: #C3C3C5"
      />
      <text class="text-button" @click="getCode" v-if="!countdown">获取验证码</text>
      <view v-else style="display: flex">
        <uni-countdown
          :showDay="false"
          :showHour="false"
          :showMinute="false"
          :second="6"
          @timeup="countdown = false"
        />
        秒后请重新获取验证码
      </view>
    </uni-forms-item>

    <view class="agreement">
      <radio :checked="isAgree" color="#16C2A3" @click="isAgree = !isAgree" />
      我已同意
      <text class="link">用户协议</text>
      及
      <text class="link">隐私协议</text>
    </view>

    <button class="uni-button" @click="submit">登 录</button>
  </uni-forms>
</template>

<script lang="ts">
// 开启样式共享（单独配置）
export default {
  options: {
    styleIsolation: "shared",
  },
}
</script>

<style lang="scss">
@import "../styles.scss";
</style>
